<template>
  <div>
      <div class="header">
          <div class="title"><text>账号数目({{total}})个</text></div>
          <el-button type="primary" style="margin-left:20px;" size="mini" class="icon el-icon-circle-plus-outline"
        @click="dialogFormVisible=true">添加</el-button>
      </div>
      <el-card class="box-card">
          <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            prop="username"
            label="账号"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="姓名"
            width="180">
          </el-table-column>
          <el-table-column
            prop="campusname"
            label="账号"
            width="180">
          </el-table-column>
          <el-table-column label="编辑账号">
              <template #default="scope">
                 <div 
                 style="color: cornflowerblue;" 
                 class="icon el-icon-edit"
                 @click="updates(scope.row)"
                 ></div>
              </template>
            </el-table-column>
          <el-table-column label="操作">
              <template #default="scope">
                <el-button
                  size="mini"
                  @click="passadd(scope.row)"
                 >重置密码</el-button>
                <el-button
                  size="mini"
                  type="danger"
                  @click="accountdelete(scope)"
                 >删除</el-button>
              </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryinfo.page"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="queryinfo.psize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
      </el-card>
      <!-- 添加 -->
      <el-dialog title="添加账号" width="40%"  v-model="dialogFormVisible">
        <el-form :label-position="labelPosition" :model="formadd">
          <el-form-item label="校区">
            <el-select placeholder="请选择" v-model="formadd.campusid">
              <el-option v-for="item in list" :label="item.title" :key="item.id" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="账号">
              <el-input size="small" v-model="formadd.username" style="width: 300px;" placeholder="请输入账号" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input size="small" v-model="formadd.pass" style="width: 300px;" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input size="small" v-model="formadd.name" style="width: 300px;"  placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input size="small"  v-model="formadd.tel" style="width: 300px;" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input size="small" v-model="formadd.email" style="width: 300px;" placeholder="请填写邮箱"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="formadd.remarks" style="width: 300px;" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertadd">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 重置密码 -->
      <el-dialog title="重置" width="40%"  v-model="dialogFormVisiblepass">
        <el-form :label-position="labelPosition" :model="passform">
            <el-form-item label="重置密码">
              <el-input size="small" v-model="passform.pass" style="width: 300px;" placeholder="请输入新密码"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisiblepass = false">取 消</el-button>
            <el-button type="primary" @click="insertadd">确 定</el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 修改 -->
      <el-dialog title="更新" width="40%"  v-model="dialogFormVisibleupdate">
        <el-form :label-position="labelPosition" :model="update">
          <el-form-item label="校区">
            <el-select placeholder="请选择" v-model="update.campusid">
              <el-option v-for="item in list" :label="item.title" :key="item.id" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
            <el-form-item label="账号">
              <el-input size="small" v-model="update.username" style="width: 300px;" placeholder="请输入账号" ></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input size="small" v-model="update.pass" style="width: 300px;" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="姓名">
              <el-input size="small" v-model="update.name" style="width: 300px;"  placeholder="请输入姓名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input size="small"  v-model="update.tel" style="width: 300px;" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item label="邮箱">
              <el-input size="small" v-model="update.email" style="width: 300px;" placeholder="请填写邮箱"></el-input>
            </el-form-item>
            <el-form-item label="备注">
              <el-input type="textarea" v-model="update.remarks" style="width: 300px;" placeholder="请输入"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisibleupdate = false">取 消</el-button>
            <el-button type="primary" @click="updatex">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
</template>
<script>
  export default {
     data(){
         return{
          labelPosition:'top',
          dialogFormVisible:false,
          dialogFormVisiblepass:false,
          dialogFormVisibleupdate:false,
          list:[],
          tableData: [],
          queryinfo:{
            page:1,
            psize:5
          },
          passform:{
           id:'',
           pass:''
          },
          update:{
           id:'',
           remarks:''
          },
          formadd:{

          },
          total:0,
         }
     },
     created(){
           this.account()
           this.back()
         },
     methods:{
    // 重置密码
    passadd(row){
console.log(row)
    this.dialogFormVisiblepass=true
    this.passform.id=row.id
    this.tableData.forEach(item=>{
      // console.log(item)
      if(row.id==item.id){
        this.passform.pass=item.pass
      }
    })
    },
    // 修改
    updates(row){
      console.log(row)
      this.dialogFormVisibleupdate=true
      this.update.id=row.id
      this.tableData.forEach(item=>{
        if(row.id==item.id){
        this.update.campusid=item.campusid
        this.update.username=item.username
        this.update.name=item.name
        this.update.pass=item.pass
        this.update.tel=item.tel
        this.update.email=item.email
        this.update.remarks=item.remarks
        }
      })
    },
   async updatex(){
       const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/company/add',this.update)
      //  console.log(res)
      if(res.errCode==10000){
      this.dialogFormVisibleupdate=false
      this.$message.success('修改成功')
      this.account()
    }
    },
    //  添加
   async insertadd(){
     const {data:res} = await this.$http.post('http://www.eshareedu.cn/edusystems/api/company/add',this.formadd)
    //  console.log(res)
    if(res.errCode==10000){
      this.dialogFormVisible=false
      this.$message.success('添加成功')
      this.account()
    }
    },
      handleSizeChange(val) {
        this.queryinfo.psize=val
        this.account()
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.queryinfo.page=val
      this.account()

      console.log(`当前页: ${val}`);
    },
      async account(){
          const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/company/list',{params:this.queryinfo})
          // console.log(res)
          this.tableData = res.data.list
          this.total=res.data.counts
      },

     async accountdelete(sid){
      const cath = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(error=> {
          //  console.log(error)
          return error
      })
       console.log(cath)
       if(cath=='cancel'){
           this.$message.info('已取消删除')
       }
       if(cath=='confirm'){
          const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/company/delete',{params:{id:sid.row.id}})
          if(res.errCode==10000){
              this.$message.success('删除成功')
              this.account()
          }
       }
          
      },
      // 校区接口
      async back(){
       const {data:res} = await this.$http.get('http://www.eshareedu.cn/edusystems/api/campus/list')
      // console.log(res)
      this.list = res.data.list
      }
    },

 }
</script>
<style scoped>
  .header {
  width: 100%;
  display: flex;
  height: 50px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 1px 1px 3px 1px rgb(200, 226, 241);
  background-color: rgb(233, 237, 240);
  align-items: center;
}

.title {
  width: 100px;
  height: 100%;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  /* background-color: rgb(198, 219, 243); */
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
.box-card{
    margin-top: 10px;
}
</style>